<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<%@ include file="../include/head.jsp" %>
	<meta charset="UTF-8">
	<title>crm</title>
	<style type="text/css" media="screen">
	table.mapping {
	    font-size: 12px;
	    width: 100%;
	}
	table.mapping th {
	    background-color: #EFEFEF;
	    border-bottom: 1px solid #DCDCDC;
	    padding: 5px 5px 5px 10px;
	}
	table.mapping th span {
	    float: right;
	    font-weight: normal;
	    padding-right: 5px;
	}
	table.mapping td {
	    border-bottom: 1px solid #EDEDED;
	    padding: 5px 5px 5px 10px;
	}
	table.mapping td.missing {
	    background-color: #FFFFCC;
	}
	div.submit {
	    border-top: 2px solid #999999;
	    margin: 30px 0 0;
	    padding: 10px 0 0;
	}
	</style>
</head>

<body class="crm">
	
	<jsp:include page="../include/top.jsp">
		<jsp:param value="contact" name="tag"/>
	</jsp:include>
	
	<div class="container-fluid" style="margin-left:130px">
		<div class="row-fluid">
			<div class="span8">
				<div class="well screen">
					<div class="page-header header">
							接下来：匹配您的数据
					</div>
					<div class="live_search_spinner" behavior="spinner" id="parties_loading">
					  <div class="liner">
					    <h3>处理中...</h3>
					    <img src="mapping_files/indicator.gif" alt="WorkXP">
					  </div>
					</div>
					<div class="main" id="main">

			<div>
				<h4>现在帮助我们将您的数据与我们字段匹配</h4>
				<p>请您看下面表格，将要导入的数据与我们字段进行匹配，多看几条记录，确定匹配正确后再进行导入。</p>
			</div>
			<form novalidate="novalidate" accept-charset="UTF-8" action="imports.action" class="edit_contact_import" id="import_form" method="post">
			<div style="margin:0;padding:0;display:inline">
			<input name="utf8" value="?" type="hidden">
			<input name="_method" value="put" type="hidden">
			</div>
				<table class="mapping">
					<tbody style="text-align:center;">
					<tr>
						<th style="width: 30%;">字段</th>
						<th style="width:70%">第一行属性
							
						</th>
					</tr>
					<c:forEach items="${attrs }" var="attr">
						<tr>
							<td>
								<select id="mapping_" name="maps">
								<option value=""  selected="selected">没有匹配，请选择...</option>
								<option value="">不需要导入这个字段</option>
								<option value="name">姓名</option>
								<option value="title">职位</option>
								<option value="company">公司名称</option>
								<option value="address">地址</option>
								<option value="content">背景信息</option>
								<optgroup label="电话">
								<option value="phone_office">电话 - 工作</option>
								<option value="phone_home">电话 - 家庭</option>
								<option value="phone_other">电话 - 其它</option>
								</optgroup>
								<optgroup label="邮箱">
								<option value="email_work">邮箱 - 工作</option>
								<option value="email_personal">邮箱 - 个人</option>
								<option value="email_other">邮箱 - 其它</option>
								</optgroup>
								<optgroup label="IM">
								<option value="im_gtalk">IM - GTalk</option>
								<option value="im_msn">IM - MSN</option>
								<option value="im_qq">IM - QQ</option>
								</optgroup>
								<optgroup label="网站">
								<option value="website_office">网站 - 公司</option>
								<option value="website_personal">网站 - 个人</option>
								<option value="website_other">网站 - 其它</option>
								</optgroup>
								</select>
							</td>
							<td id="column_0">${attr }</td>
						</tr>
					</c:forEach>
						
					</tbody>
			</table>

	<div class="submit">
		<h4>完成导入</h4>
		<p>如果你确认这些数据匹配正确，请点击下面导入按钮，我们会把你CSV文件中的所有数据导入到系统中。</p>
		<p>
			<input class="btn btn-primary" value="导入这些联系人" type="submit">
			<a href="map.action" class="btn">取消导入</a>
		</p>
	</div>
</form>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>